<template>
  <div>
     <el-card style="margin:10px 0px">
         <!-- v-model="activeName" @tab-click="handleClick" -->
         <div class="big_tabs" >
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="销售额" name="first"></el-tab-pane>
                <el-tab-pane label="访问量" name="second"></el-tab-pane>  
            </el-tabs>
            <div class="div_right">
                  <span @click="GetNow">今日</span>
                  <span @click="GetDay">本周</span>
                  <span @click="GetMonth">本月</span>
                  <span @click="GetYear" class="lastspan">本年</span>
                   <!-- v-model="value" -->
                   <el-date-picker
                        v-model="DataValue"
                        width='200px'
                        size='mini'
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        format="yyyy 年 MM 月 dd 日"
                    >
                    </el-date-picker>
            </div>
         </div>

           <el-row :gutter="20">
                        <el-col :span="18">
                            <div class="bar" ref="bar"></div>
                        </el-col>
                        <el-col :span="6">
                            <div class="col_ul">
                                <span>门店{{Settitle}}排名</span>
                                <ul>
                                    <li>
                                        <i class="radius">1</i>
                                        <span class="text">肯德基</span>
                                        <span>323,234</span>
                                    </li>
                                    <li>
                                        <i class="radius">2</i>
                                        <span class="text">麦丹劳</span>
                                        <span>299,132</span>
                                    </li>
                                    <li>
                                        <i class="radius">3</i>
                                        <span class="text">肯德基</span>
                                        <span>283,998</span>
                                    </li>
                                    <li>
                                        <i>4</i>
                                        <span class="text">海底捞</span>
                                        <span>266,233</span>
                                    </li>
                                    <li>
                                        <i>5</i>
                                        <span class="text">西贝面</span>
                                        <span>233,445</span>
                                    </li>
                                    <li>
                                        <i>6</i>
                                        <span class="text">汉堡包</span>
                                        <span>219,445</span>
                                    </li>
                                    <li>
                                        <i>7</i>
                                        <span class="text">真功夫</span>
                                        <span>200,997</span>
                                    </li>
                                </ul>
                            </div>
                        </el-col>
            </el-row>
     </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import dayjs from 'dayjs'
export default {
    name:'Sale',
    data() {
        return {
            activeName: 'first',
            Settitle:'销售额',
            myChart:'',
            DataValue:''
        }
    },
    mounted() {
        this.myChart = echarts.init(this.$refs.bar);
    },
    watch: {
        activeName:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                if (this.activeName=='second') {
                     this.myChart.setOption({
                         series:[
                             {
                                 data: [100, 25, 330, 234, 30, 230, 20,270,80,160,40,390]
                             }
                         ]
                    })
                }else{
                    this.myChart.setOption({
                        color:'#5470c6',
                        title:{
                            text:this.Settitle+'趋势'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                label:{
                                    show:true,
                                },
                                lineStyle :{
                                    color:'red'
                                }
                            },
                            
                        },
                        xAxis: [
                                {
                                    type: 'category',
                                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],    
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        yAxis: [{
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true
                            },
                            axisTick: {
                                show:false
                            }
                            } 
                        ],
                        series: [
                            {
                                name: 'Direct',
                                type: 'bar',
                                barWidth: '60%',
                                data: [10, 80, 200, 334, 390, 330, 220,70,200,320,390,120]
                            }
                        ]
                    })
                }
                 this.myChart.setOption({
                      title:{
                            text:this.Settitle+'趋势'
                        },
                 })
                })
               
            }
        }
    },
    methods: {
        handleClick(tab,event){
                this.activeName=='first' ? this.Settitle='销售额' : this.Settitle = '访问量'
        },
        GetNow(){
            let now = dayjs()
            this.DataValue = [now.format(),now.format()]
        },
        GetDay(){
            let day = dayjs()
            this.DataValue = [day.day(1).format(),day.day(7).format()]
        },
        GetMonth(){
            let month = dayjs()
            this.DataValue= [month.startOf('month').format(),month.endOf('month').format()]
        },
        GetYear(){
            let year = dayjs()
            this.DataValue = [year.startOf('year').format(),year.endOf('year').format()]
        }
    },
}
</script>

<style lang="scss" scoped>

::v-deep .el-row{
    margin-left: 10px !important;
    margin-right: 10px !important;
}
// ::v-deep .el-tabs__nav-wrap{
//     border-bottom: 2px solid #E4E7ED;
// }
::v-deep .el-tabs__nav-wrap::after{
    height:1px
}
::v-deep .el-card__body{
    padding: 0;
}
::v-deep .el-date-editor--daterange.el-input__inner{
    width: 310px;
}
::v-deep .el-tabs__nav-scroll{
        margin-left: 20px;
    }
.big_tabs{
    position: relative;
    margin-top: 6px;
    ::v-deep .el-tabs__item{
        font-size: 16px;
        padding: 0 10px;
    }
    .div_right{
        position: absolute;
        right: 20px;
        top:3px;
        span{
            margin: 0 10px;
            font-size: 14px;
        }
        .lastspan{
            margin-right: 20px;
        }
    }
}
.bar{
    width: 100%;
    height: 300px;
}
.col_ul{
    height: 100%;
    height: 300px;
    ul{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        list-style: none;  
        padding: 0;
        li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            i{
                font-style: normal;
                line-height: 15px;
                width: 15px;
                box-sizing: border-box;
                font-size: 11px;
                height: 15px;
                text-align: center;
            }
            .radius{
                border-radius: 50%;
                background: #000;
                color: #fff;
            }
            span{
                font-size: 15px;
                margin-right: 5px;
            }
            .text{
                margin-left: 25px;
                flex: 2 1 auto;
            }
        }
    }
}
</style>